<template>
    <div class="app-container">
      
      <!-- :inline="true"表示行内表单 -->
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item>
          <!-- v-model为什么绑定叫hosname和hoscode的属性，因为后端由@RequestBody修饰的实体类HospitalSetQueryVo正好就是这两个属性，名字必须和
          HospitalSetQueryVo的属性名保持一致，这样才能把前端传的数据绑定到HospitalSetQueryVo实体中 -->
          <el-input v-model="searchObj.cname" placeholder="竞赛名称"/>
        </el-form-item>
        
        <el-button type="primary" icon="el-icon-search" @click="fetchData()">查询</el-button>
  
    
        
        
      </el-form>
  
      
  
      <!-- banner列表 -->
      <el-table :data="list" stripe style="width: 100%">
        <!-- <el-table-column type="index" width="50"/> -->
        <el-table-column prop="competition.id" label="竞赛编号"/>
        <el-table-column prop="competition.cname" label="竞赛名称"/>
        <el-table-column prop="competition.year" label="年度" width="200"/>
        <el-table-column prop="competition.content" label="竞赛内容"/>
        <el-table-column prop="competition.date" label="竞赛日期"/>
        <el-table-column prop="competition.norm" label="竞赛规范"/>

         <!-- 操作栏 -->
         <el-table-column label="获奖情况" width="280" align="center">
          <!-- slot-scope="scope"表示当前行所在的域 -->
          <template slot-scope="scope">
  
           
            &nbsp;
            <el-button type="success" plain v-if="scope.row.status">已获奖</el-button>
            <el-button type="danger" plain v-if="!scope.row.status">未获奖</el-button>
            &nbsp;
            
          </template>
        </el-table-column>

        <!-- 操作栏 -->
        <el-table-column label="操作" align="center">
          <!-- slot-scope="scope"表示当前行所在的域 -->
          <template slot-scope="scope">

            <!-- 上传作品 -->
            <el-upload
                    :multiple="false"
                    :on-success="onUploadSuccess"
                    :action="'http://localhost:8088/stucom/upload/'+scope.row.id+'/'+token"
                    class="upload-demo">
                        <el-button size="small" type="primary">上传作品</el-button>
                        
            </el-upload>

            
          </template>
        </el-table-column>
  
  
  
      </el-table>
  
      <!-- 分页 -->
      <!--:current-page是当前页，改成current,前边有冒号，是v-bind，所以冒号里写js表达式  -->
      <!-- @current-change是element-ui的一个事件，切换分页的时候触发 -->
      <el-pagination
        :current-page="current"  
        :page-size="limit"
        :total="total"
        style="padding: 30px 0; text-align: center;"
        layout="total, prev, pager, next, jumper"
        @current-change="fetchData"
      />
  
    </div>
  </template>
  
  <script>
  import student from '@/api/student' 
  import Cookies from 'js-cookie'
  export default {
      data() {
          return {
            current:1, //当前页
            limit:5,   //每页显示记录数
            searchObj:{},//条件封装对象
            list:[],//当前页的数据集合  
            total:0, //总记录数

            token:''
          }
      },
      created(){
        //获取数据
        this.fetchData()

        const TokenKey = 'vue_admin_template_token'
        const token=Cookies.get(TokenKey)

        this.token=token

      },
      
      //带分页
      methods:{
        fetchData(current=1){
          this.current=current;
          student.getPageList(this.current,this.limit,this.searchObj).then(response=>{
            this.list=response.data.list;//records是IPage里的
            this.total=response.data.total;
            console.log(response)
            
          })
        },
  
        //删除
        removeDataById(id){
          this.$confirm('此操作将删除客户信息,是否继续?','提示',{
            confirmButtonText:'确定',
            cancelButtonText:'取消',
            type:'warning'
          }).then(()=>{
            //确定后执行then方法
            admin.deleteCom(id).then(response=>{
            //提示
            this.$message({
              type:'success',
              message:'删除成功！'
            })
            //刷新页面(再次调用查询列表带分页的接口)
            this.fetchData()
          })
          });
          
        },

        
      }
  }
  </script>
  
  <style>
  
  </style>